﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>菜单测试</title>
    <link href="Menu.css" type="text/css" rel="Stylesheet" />

    <script type="text/javascript" src="MenuClass.js"></script>

    <script type="text/javascript" src="Menu.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            /* 脚本代码的添加操作务必放在 </body> 前面，以免引发 KB927917 错误 */
            /* 解决 KB927917 错误网址引用：http://blog.csdn.net/cleanerq/archive/2009/07/15/4351371.aspx */
            /*
            Apply 应用设置
            Show 显示
            Hide 隐藏
            Item 参数依次说明：显示的文字，图标位置
            Link 参数依次说明：显示的文字，链接到的地址(可传入字符串或 js 方法)，只读状态，图标位置，是否在新窗口打开
            Line 没有参数
            */

            var t0 = new MenuClass();
            t0.containerId = "divHorizontal"; // 菜单放置的 element 的 id
            t0.arrowUrl = ""; // 箭头图标 url
            t0.baseTarget = 0; // 0 表示新窗口，1 表示本窗口
            t0.exportType = 0; // 0 表示主菜单水平显示，1 表示主菜单垂直，2 表示右键菜单，3 表示自定义显示或隐藏
            t0.Apply(); // 应用设置
            CreateMenuItems(t0); // 创建菜单项

            var t1 = new MenuClass();
            t1.containerId = "divVertical"; // 菜单放置的 element 的 id
            t1.arrowUrl = ""; // 箭头图标 url
            t1.baseTarget = 0; // 0 表示新窗口，1 表示本窗口
            t1.exportType = 1; // 0 表示主菜单水平显示，1 表示主菜单垂直，2 表示右键菜单，3 表示自定义显示或隐藏
            t1.Apply(); // 应用设置
            CreateMenuItems(t1); // 创建菜单项

            var t2 = new MenuClass();
            t2.containerId = "divContextMenu"; // 菜单放置的 element 的 id
            t2.arrowUrl = ""; // 箭头图标 url
            t2.baseTarget = 0; // 0 表示新窗口，1 表示本窗口
            t2.exportType = 2; // 0 表示主菜单水平显示，1 表示主菜单垂直，2 表示右键菜单，3 表示自定义显示或隐藏
            t2.Apply(); // 应用设置
            CreateMenuItems(t2); // 创建菜单项

            var t3 = new MenuClass();
            t3.containerId = "divCustomer"; // 菜单放置的 element 的 id
            t3.arrowUrl = ""; // 箭头图标 url
            t3.baseTarget = 0; // 0 表示新窗口，1 表示本窗口
            t3.exportType = 3; // 0 表示主菜单水平显示，1 表示主菜单垂直，2 表示右键菜单，3 表示自定义显示或隐藏
            t3.Apply(); // 应用设置
            CreateMenuItems(t3); // 创建菜单项

            window.CustomerShow = function(o) { t3.Show(o); }
        }
    </script>

</head>
<body>
    <div>
        脚本代码的添加操作务必放在 body 前面，以免引发 KB927917 错误
        <br />
        解决 KB927917 错误网址引用：http://blog.csdn.net/cleanerq/archive/2009/07/15/4351371.aspx
        <br />
        目前在 IE8 和 FF3.5 下测试通过
        <br />
        <br />
        主要文件说明：<br />
        ---------------------------------------------------------------
        <br />
        MenuClass.js 菜单代码文件<br />
        Menu.css 菜单 CSS 文件<br />
        Test.htm 菜单说明文件<br />
        ---------------------------------------------------------------<br />
        <br />
        方法说明(所有 Item 项同时也具有 Item/Link/Line 方法)：<br />
        ---------------------------------------------------------------
        <br />
        Apply 应用设置
        <br />
        Show 显示<br />
        Hide 隐藏<br />
        Item 参数依次说明：显示的文字，图标位置<br />
        Link 参数依次说明：显示的文字，链接到的地址(可传入字符串或 js 方法)，只读状态，图标位置，是否在新窗口打开<br />
        Line 没有参数<br />
        ---------------------------------------------------------------<br />
        <br />
        设置说明：<br />
        ---------------------------------------------------------------<br />
        var t0 = new MenuClass();
        <br />
        t0.containerId = "divHorizontal"; // 菜单放置的 element 的 id
        <br />
        t0.arrowUrl = ""; // 箭头图标 url
        <br />
        t0.baseTarget = 0; // 0 表示新窗口，1 表示本窗口
        <br />
        t0.exportType = 0; // 0 表示主菜单水平显示，1 表示主菜单垂直，2 表示右键菜单，3 表示自定义显示或隐藏
        <br />
        t0.Apply(); // 应用设置
        <br />
        var oEdit_1 = t0.Item("编辑");
        <br />
        t0.Link("链接", "http://www.ZhenEr2008.cn", false, "./Images/2.png");
        <br />
        t0.Line();
        <br />
        ---------------------------------------------------------------<br />
        如果有特殊需要，可以找到 MenuClass.js 文件的构造方法，里面有更详尽的设置选项
        <br />
        <br />
        实例：<br />
    </div>
    <div id="divHorizontal" style="margin-top: 50px; margin-left: 800px; width: 500px; border: solid 1px #ccc;">
        水平</div>
    <div id="divVertical" style="margin-top: 100px; margin-left: 800px; width: 500px; border: solid 1px #ccc;">
        垂直</div>
    <div id="divContextMenu" style="margin-top: 100px; margin-left: 800px; width: 200px; height: 200px; border: solid 1px #ccc;">
        右键区域</div>
    <div id="divCustomer" style="margin-top: 100px; margin-left: 800px; width: 200px;  border: solid 1px #ccc;">
        自定义 <a href="javascript:void(0);" onclick="CustomerShow(this);" style="display: block;
            float: left; width: 100px; border: solid 1px #000; text-align: center;">显示菜单</a>
    </div>
</body>
</html>
